<template>
  <div class="explore-page">
    <div class="mySwiper">
      <div class="swiperSlideClass">
        <div class="playbox">
          <div class="title">{{ setTitle(item.previewVideoName) }}</div>
          <video class="videoItem" @durationchange="durationchange" ref="videotest"
            id="videotest" @canplay="canplay(item)" @timeupdate="onTimeupdate" :poster="options.poster"
            controlslist="nodownload" @ended="endPlay" @click="changePlayBtn" autoplay playsinline preload="auto" loop>
          </video>
          <!-- 控制器 :class="{ barBoxShow: showControls, screenBarBox: (isScreen)}" -->
          <div class="barBox">
            <div class="controlsBox">
              <div class="progressBox">
                <progress :value="progressValue" class="progress" ref="progress" :max="videoLenght"></progress>
              </div>
            </div>
          </div>
          <img v-if="showControls" src="svg/play_icon.svg" class="videoButton" @click="changePlayBtn" />
          <!-- 右侧栏 -->
          <div class="controllerbox" :style="{ paddingBottom: (getBroser()) + 'px' }">
            <div class="left">
              <div class="creator">{{ '@' + setTitle(item.creatorName) }}</div>
              <div class="desc">{{ setTitle(item.introduction) }}</div>
              <button>View</button>
            </div>
            <div class="right">
              <img :src="item.avatar" class="avatar">
              <img src="svg/ic_episode_share.svg" class="share">
              <img 
                :src="item.favorite ? 'svg/ic_episode_liked.svg' : 'svg/ic_episode_unlike.svg'"
                class="like">
              <img :src="isMute ? 'svg/ic_mute.svg' : 'svg/ic_sound.svg'" class="muted"
                @click="mutedMethod(isMute ? 1 : 0)">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { videoPlay } from "vue3-video-play";
import Hls from 'hls.js';

export default {
  name: "previewPage",
  components: {
    videoPlay
  },
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    getBroser() {
      return function () {
        if (this.broserType.includes('chrome') && !this.broserType.includes('edga') && !this.broserType.includes('ucbrowser')) {
          return 36;
        }
        if (this.broserType.includes('edga')) {
          return 80;
        }
      };
    },
    setTitle() {
      return function (title) {
        return title && (title[this.$i18n.locale] || title['en_US']);
      };
    }
  },
  data() {
    return {
      hls: null,
      broserType: '',
      list: [],
      videoUrl: "",
      options: {
        autoplay: true,
        poster: ""
      },
      playId: "test",
      mySwiper: null,

      phoneScreen: true,
      vhType: null,
      shortTitle: "",
      showControls: true,
      subtitlesMenu: null,
      videoContainer: null,
      subtitleMenuButtons: [],
      isScreen: 0,
      showSubtitle: false,
      progressValue: 0,
      maxTime: 0,
      playTime: "00:00:00",
      endTime: "00:00:00",
      videoLenght: 0,
      isMute: false,
      isPlay: false,
      videoRef: null,
      // 字幕
      cationArr: [
      ],
      // 定时器隐藏控件
      interval: null
    };
  },
  watch: {
    // showControls: {
    //   handler: function(isShow) {
    //     // this.$emit("showControls", isShow);
    //   },
    //   immediate: true,
    //   deep: true // 可以深度检测到 person 对象的属性值的变化
    // }
  },
  unmounted() {
    try {
      for (let i = 0; i < this.list.length; i++) {
        this.$refs['videotest'] = null;
      }
      console.log('expore页面销毁', this.$refs['videotest']);
    } catch (e) {
      console.warn(e);
    }
  },
  mounted() {
    this.$nextTick(() => {
      console.log('short data', this.item);
      // 注册使用
      this.init(this.item.videoUrl);
    });
  },
  methods: {
    changePlayBtn() {
      console.log('当前状态', this.$refs["video" + this.playId].paused)
      if (this.$refs["video" + this.playId].paused) {
        this.isPlay = false;
        this.showControls = false;
        this.$refs["video" + this.playId].play();
      } else {
        this.isPlay = true;
        this.showControls = true;
        this.$refs["video" + this.playId].pause();
      }
      this.isMute = this.$refs['video' + this.playId].muted ? true : false;
    },
    // 音量控制
    mutedMethod(type = 0) {
      this.$refs["video" + this.playId].muted = type == 1 ? false : true;
      this.isMute = this.$refs["video" + this.playId].muted ? true : false;
    },
    // toDetail(id) {
      // this.$router.push({ path: "/index/short", query: { id: id } });
    // },
    onChange(item) {
      console.log(222222, item);
    },
    init(url = "") {
      if (!url) return;
      if(this.item.isHls) { 
        this.hls = new Hls();
        this.hls.loadSource(url);
        this.hls.attachMedia(this.$refs['videotest']);   
      } else {
        this.$refs['videotest'].src = url;
      }
    },
    onClickForward(id) {
      console.log(id);
    },
    onTimeupdate() {
      if(!this.$refs["video" + this.playId])return
      this.timeFormat(this.$refs["video" + this.playId].currentTime, false);
    },
    // 当前时间
    timeFormat(time = 0, isClick = false) {
      this.showControls = this.$refs['video' + this.playId].paused ? true : false;
      const start = time;
      if (start != 0) this.progressValue = Number(start);
      if (isClick) this.$refs["video" + this.playId].currentTime = start;
    },
    canplay(item) {
      console.log("进入播放", this.playId, item);
      this.$refs["video" + this.playId].pause();
      this.$nextTick(() => {
        var promise = this.$refs["video" + this.playId].play();
        if (promise !== undefined) {
          promise
            .then(() => {
              this.$refs["video" + this.playId].muted = false;
              this.isMute = this.$refs['video' + this.playId].muted ? true : false;
            })
            .catch(error => {
              console.log(error);
              this.$refs["video" + this.playId].muted = true;
              this.isMute = this.$refs['video' + this.playId].muted ? true : false;
            });
        }
        this.videoLenght = Number(this.$refs["video" + this.playId].duration);
        console.log(
          "可以播放",
          this.$refs["video" + this.playId].duration,
          this.$refs["video" + this.playId].currentTime
        );
        setTimeout(() => {
          this.showControls = this.$refs['video' + this.playId].paused ? true : false;
        }, 500)
      });
    },
    endPlay() { },
  }
};
</script>
<style scoped>
/* 全屏按钮 */
video::-webkit-media-controls-fullscreen-button {
  display: none;
}

/* 播放按钮 */
video::-webkit-media-controls-play-button {
  display: none;
}

/* 进度条 */
video::-webkit-media-controls-timeline {
  display: none;
}

/* 观看的当前时间 */
video::-webkit-media-controls-current-time-display {
  display: none;
}

/* 剩余时间 */
video::-webkit-media-controls-time-remaining-display {
  display: none;
}

/* 音量按钮 */
video::-webkit-media-controls-mute-button {
  display: none;
}

/* 画中画 */
video::-webkit-media-controls-toggle-closed-captions-button {
  display: none;
}

/* 音量的控制条 */
video::-webkit-media-controls-volume-slider {
  display: none;
}

/* 所有控件 */
video::-webkit-media-controls-enclosure {
  display: none;
}

/* 适用于所有浏览器的隐藏滚动条 */
.hidden-scrollbar {
  overflow: hidden;
  /* 这是一个通用的方法，但它会禁用滚动 */
}

/* 只隐藏滚动条，但仍允许滚动 */
.scrollable-content {
  overflow: auto;
}

.scrollable-content::-webkit-scrollbar {
  display: none;
  /* 适用于 Webkit 浏览器 (Chrome, Safari) */
}

/* Firefox 特定的隐藏滚动条方法 */
.scrollable-content {
  scrollbar-width: none;
  /* Firefox */
}
</style>
<style lang="scss" scoped>
.explore-page {
  width: 100%;
  // height: calc(100vh - 77px);
  height: 100%;
  overflow: hidden;

  .mySwiper {
    width: 100%;
    height: 100%;

      .swiperSlideClass {
        width: 100%;
        height: 100% !important;

        .playbox {
          position: relative;
          height: 100%;
          width: 100%;
          /* 自定义bar */
          .barBox {
            width: 100%;
            height: 0;
            position: absolute;
            bottom: 10px;
            transition: all 0.2s;
            /* overflow: hidden; */
          }

          .videoButton {
            width: 70px;
            cursor: pointer;
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 99;
          }

          .controlsBox {
            width: 100%;
            height: 100%;
            /* background: #000; */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-size: 20px;
            /* display: none; */
          }

          .titlebox {
            width: 100%;
            height: 40px;
            position: absolute;
            top: 0;
            overflow: hidden;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            color: #fff;
            z-index: 9999;
          }

          .titlebox img {
            transform: rotateZ(180deg);
            transform-origin: 50% 50%;
            margin-left: 10px;
          }

          .titlebox span {
            margin-left: 10px;
          }

          .progressBox {
            width: 100%;
            height: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          }

          .time1,
          .time2 {
            font-size: 12px;
            color: white;
            width: 14%;
          }

          .time2 {
            text-align: right;
          }

          .screenVideo {
            object-fit: contain;
            transform: rotate(90deg) translate(0, -100vw);
            width: 100vh !important;
            height: 100vw !important;
            padding: 0 !important;
            transform-origin: 0 0;
          }

          /*
      .screenBarBox {
      transform: rotateZ(90deg) translate(-50px, 0);
      left: 0;
      bottom: 0;
      top: 0;
      right: 0;
      height: 50px;
      width: 100vh !important;
      transform-origin: 0 50px;
      }*/

          .videoPlaybox {
            width: 100%;
            height: 100%;
            position: relative;
          }

          .videoPlaybox_leftside {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: calc(100% - 50px);
            z-index: 999;
          }

          .videoPlaybox_leftside_icon {
            width: 50px;
            margin-top: 50px;
          }

          /* 进度条 */
          //   .progress {
          //     width: 100%;
          //     left: 50px;
          //     height: 10px;
          //     cursor: pointer;
          //   }

          //   .progress::-webkit-progress-bar {
          //     background-color: #d7d7d7;
          //   }

          //   progress::-webkit-progress-value {
          //     background-color: #fff;
          //   }

          //   .progress::-moz-progress-bar {
          //     background-color: #fff;
          //   }
          progress[value] {
            width: 100%;
            /* 宽度 */
            height: 4px;
            /* 高度 */
            appearance: none;
            /* 取消默认样式 */
          }

          progress[value]::-webkit-progress-bar {
            /* WebKit 内核浏览器（如 Chrome） */
            background-color: rgba(255, 255, 255, 0.57);
            /* 进度条背景颜色 */
          }

          progress[value]::-webkit-progress-value {
            /* WebKit 内核浏览器（如 Chrome） */
            background-color: #fff;
            /* 已完成部分的颜色 */
          }

          progress[value]::-moz-progress-bar {
            /* Firefox */
            background-color: #fff;
            /* 已完成部分的颜色 */
          }

          .playBox {
            width: 95%;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 99;
          }

          .playBox_rightside {
            display: flex;
            justify-content: flex-end;
            align-items: center;
          }

          .subtitleBox {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            position: relative;
          }

          .subtitleBox:hover .srtbox {
            display: block;
          }

          .srtbox {
            width: 80px;
            max-height: 100px;
            background: rgba(0, 0, 0, 0.8);
            position: absolute;
            bottom: 26px;
            /* left: -40px; */
            overflow-y: scroll;
            /* display: none; */
            color: #ffff;
            z-index: 999;
          }

          .srtbox .item {
            /* width: 100%; */
            color: #fff;
            font-size: 12px;
            line-height: 24px;
            padding: 0 10px;
            cursor: pointer;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            white-space: nowrap;
            border-bottom: 1px solid #3b3b3b;
          }

          /* .barBox:hover .controlsBox {
      display: flex;
      } */

          .rightSideIcon {
            margin-left: 5px;
          }

          .timebox {
            position: absolute;
            top: 20px;
            left: 420px;
            cursor: pointer;
            color: white;
          }

          #full {
            position: absolute;
            top: 12px;
            right: 20px;
            cursor: pointer;
          }


          .title {
            font-weight: 700;
            font-size: 18px;
            color: #fff;
            position: absolute;
            top: 20px;
            left: 20px;
          }

          .videoItem {
            width: 100%;
            height: 100%;
            background: #000;
            // calc(100vh - 77px);
          }

          .controllerbox {
            position: absolute;
            bottom: 14px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            pointer-events: none;
            background: linear-gradient(0deg, #000000 -2.61%, rgba(5, 5, 5, 0) 100%);
            .left {
              display: flex;
              flex-direction: column;
              color: #fff;
              font-size: 14px;
              font-weight: 700;
              margin: 0 20px;
              width: 62%;

              .creator {
                font-size: 16px;
                margin-top: 8px;
              }

              .desc {
                font-size: 14px;
                font-weight: 400;
                margin-top: 8px;
              }

              button {
                margin-top: 16px;
                margin-bottom: 20px;
                background: none;
                font-size: 16px;
                font-weight: 700;
                color: #bb9b51;
                line-height: 40px;
                border: 2px solid #bb9b51;
                border-radius: 8px;
                cursor: pointer;
                pointer-events: all;
              }
            }

            .right {
              display: flex;
              flex-direction: column;
              align-items: center;
              margin: 0 20px 24px 0;
              pointer-events: all;

              img {
                width: 30px;
                height: 30px;
                margin: 20px 0;
                cursor: pointer;
              }

              .avatar {
                width: 42px;
                height: 42px;
                border-radius: 42px;
              }
            }
          }
        }
      }

    .swiper-wrapper div:nth-child(0) {
      height: 100% !important;
    }
  }
}
</style>
